<template>
  <div class="">
    <div class="listIn" v-for="(item,indx) in dataList" :key="indx">
      <div class="inThis">
        <div class="inTitleIn">
          <div class="" style="display: flex;">
            <div class="" style="font-weight: bold;color: #696969;font-size: 18px;">
              {{ item.title }}
            </div>
            <div class="myScore">
              总分：{{ item.total_score }}
            </div>
            <div class="myScore">
              剩余次数：<span style="color: #0074d9;font-weight: bold;">{{ item.exam_num }}</span>
            </div>
          </div>
          <div @click="timeCountDown" class="inStatus">
            统考
          </div>

        </div>
        <div class="inUnder">
          <div class="underC">
            <div class="inTimeIn">
              <div class="">
                开始时间
              </div>
              <div class="" style="margin-top: 16px;">
                {{ item.start_time }} <span
                  style="font-weight: bold;color: #0074D9;">{{ item.startTime }}</span>
              </div>
            </div>
            <div class="inTimeIn">
              <div class="">
                结束时间
              </div>
              <div class="" style="margin-top: 16px;">
                {{ item.end_time }} <span style="font-weight: bold;color: #0074D9">{{ item.endTime }}</span>
              </div>
            </div>
            <div class="inTimeIn">
              <div class="">
                得分
              </div>
              <div class="" style="margin-top: 16px;font-weight: bold">
                <div class="" v-if="!item.myScore">
                  --
                </div>
                <div class="" v-else>
                  <span style="font-weight: bold;color: red">{{ item.myScore }}</span>
                </div>

              </div>
            </div>
            <div class="inTimeIn2">
              <div class="">
                距离考试时间
              </div>
              <div class="" style="margin-top: 16px;font-weight: bold;">
                <!--                <div class="">-->
                <!--                  &#45;&#45;-->
                <!--                </div>-->
                <div class="">
                  {{ item.downTime ? item.downTime : '--:--:--' }}
                </div>
              </div>
            </div>
          </div>
          <div class="" style="display: flex;align-items: center;">
            <!--        goExamEnd  goExam  -->
            <div v-if="item.downTime == '考试已开始!' && item.exam_num >= 1 " class="goExam" @click="openExamAlert(item) ">
              立即考试
            </div>
            <div v-if="item.downTime != '考试已开始!' || item.exam_num <= 0 " class="goExamEnd">
              立即考试
            </div>

          </div>
        </div>
        <div class="" style="text-align: right;" v-if="item.userExamNum > 0">
          <img class="mySuccess" src="../../assets/doEnd.png">
        </div>

      </div>
    </div>
    <el-dialog title="考试须知" :visible.sync="dialogVisible" width="50%" center="" :before-close="handleClose">
      <div class="inInto">
        <div class="">
          <img class="headImg" :src="userInfo.heard">
        </div>
        <div class="InUserInfo">
          <div class="examName">
            考试名称：{{ examListInfo.title }}
          </div>
          <div class="inScore">
            <div class="">
              用户名：{{ userInfo.name }}
            </div>
            <div class="">
              及格分：<span style="color: red">{{ examListInfo.pass_score }}分</span>
            </div>
            <div class="">
              总分：{{ examListInfo.total_score }}分
            </div>
          </div>
          <div class=""
               style="display: flex;font-size: 18px;margin-top: 32px;justify-content: space-between;">
            <div class="">
              身份证号：{{ userInfo.idcard }}
            </div>

          </div>
        </div>
      </div>
      <div class="inUnderInfo">
        <div class="" style="display: flex; align-items: center;">
          <div class="" style="width: 4px;height: 20px;background-color: #309af2;border-radius: 2px;">

          </div>
          <div class="inExamDetial">
            考试描述
          </div>
        </div>
        <div class="infonC">
          请考生仔细核对身份信息，核对无误后点击参加考试进入人脸识别页面。根据提示进入考试系统，进入系统时会对系统进行检测，若系统无问题则进入考试页面进行考试。
          若身份信息有误，请及时联系管理员更正。
        </div>
        <div class="infonC">
          管理员电话：<span style="color: #409eff;font-weight: bold;">{{ other.phone }}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
		 	<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="joinExam">参加考试</el-button>
			</span>
    </el-dialog>
  </div>
</template>

<script>
let timer;
export default {
  data() {
    return {
      other: {}, //其他参数 比如联系方式
      examListInfo: {}, //考试列表信息
      userInfo: null,
      timerList: [], //用于存放定时器
      currentTime: 1, //当前时间
      dataList: [], //考试列表
      dialogVisible: false,
      examList: []
    }
  },
  methods: {

    /**
     * 保存当前选择考试课程基础信息
     * @param item
     */
    openExamAlert: function (item) {
      this.$ls.set('duration', item.duration, 1000 * 60 * item.duration + 10) // 保存考试时长（多加10秒过期时间）
      this.$ls.set('examInfo', item, 1000 * 60 * item.duration + 10);
      this.examListInfo.title = item.title;
      this.examListInfo.pass_score = item.pass_score;
      this.examListInfo.total_score = item.total_score;
      this.dialogVisible = true;
    },

    //倒计时计算 秒
    timeCountDown: function (dataList) {
      dataList.forEach((item, index) => {
        clearInterval(this.timerList[index])
        timer = setInterval(() => {
          if (this.timerList.length <= this.timerList) {
            this.timerList.push(timer);
          }
          let time = item.time;
          if (time >= 0) {
            let day = Math.floor(time / (60 * 60 * 24)) < 10 ? `0${Math.floor(time / (60 * 60 * 24))}` : Math.floor(time / (60 * 60 * 24));
            let hour = Math.floor(time / (60 * 60) % 24) < 10 ? `0${Math.floor(time / (60 * 60) % 24)}` : Math.floor(time / (60 * 60) % 24);
            let minutes = Math.floor((time / 60) % 60) < 10 ? `0${Math.floor((time / 60) % 60)}` : Math.floor((time / 60) % 60);
            let seconds = Math.floor(time % 60) < 10 ? `0${Math.floor(time % 60)}` : Math.floor(time % 60);
            dataList[index].downTime = day + '天' + hour + '时' + minutes + "分" + seconds + '秒';
            item.time = --item.time
            this.dataList = dataList
            this.$forceUpdate();
          } else {
            dataList[index].downTime = '考试已开始!';
            this.$forceUpdate();
          }
        }, 1000)
      })

    },

    joinExam() {
      this.dialogVisible = false
      let examInfo = this.$ls.get('examInfo');
      if (examInfo.face) return this.$router.push('examFace')
      return this.$router.push('examing')
    },
    handleClose(done) {
      done();

    },
    /**
     * 获取考试列表
     */
    getExamList: function () {
      this.$axios.post('https://vvv.52ecode.cn//api/v1.TestCatalog/index', {
        website_id: 1,
        idcard: this.userInfo.idcard,
        pattern: 1 //1为考试
      }).then(res => {
        const {data, code} = res.data;
        this.other = data.other;
        data.exam.forEach((item) => {
          item.time = new Date(item.start_time).getTime() / 1000 - (res.data.time);
        })
        this.dataList = data.exam;
        this.timeCountDown(data.exam);
      })
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('InfoMation'));
    this.getExamList();
  }
}

</script>

<style>
.el-button--mini,
.el-button--small {
  font-size: 12px;
  border-radius: 3px;
  font-size: 18px;
}

.infonC {
  margin-top: 16px;
  line-height: 1.5;
  font-size: 18px;
}

.inExamDetial {
  color: #2f99f2;
  font-size: 20px;
  margin-left: 10px;
  font-weight: bold;
}

.inUnderInfo {
  margin-top: 16px;
}

.inScore {
  margin-top: 48px;
  display: flex;
  font-size: 18px;
  width: 100%;
  justify-content: space-between;
}

.examName {
  font-size: 22px;
}

.InUserInfo {
  width: 70%;
  margin-top: 10px;
  margin-left: 72px;
}

.headImg {
  width: 140px;
  border-radius: 4px;
  height: 180px;
}

.inInto {
  width: 100%;
  padding: 16px 0;
  display: flex;
  border-bottom: solid 1px #d1d1d1;
}

.mySuccess {
  z-index: 999;
  position: absolute;
  top: 0px;
  width: 100px;
  height: 100px;
  right: 170px;
}

.inStatus {
  margin-bottom: 10px;
  color: #409eff;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1.5pt;
}

.goExam {
  background-color: #409eff;
  height: 36px;
  width: 120px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1.5pt;
  border-radius: 3px;
  cursor: pointer;
}

.goExamEnd {
  background-color: #7bc6dd;
  height: 36px;
  width: 120px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1.5pt;
  border-radius: 3px;
  cursor: not-allowed;
}

.goExam:active {
  background-color: #7bc6dd;
}

.inTimeIn2 {
  color: #696969;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
}

.inTimeIn {
  color: #696969;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  border-right: #d4d4d4 dashed 1px;
}

.underC {
  display: flex;
}

.inUnder {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}

.myScore {
  margin-left: 40px;
}

.inTitleIn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: #d4d4d4 solid 1px;
}

.nmorin {
  width: 100%;

}

.inThis {
  width: 94%;
  margin-left: 50%;
  transform: translateX(-50%);
}

.listIn {
  margin-top: 24px;
  padding: 16px 0;
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  border-top: solid 3px #409eff;
  border-radius: 0 0 8px 8px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
